<template>
	<div class="search-wrap">
		<!-- .native 监听组件的原生事件行为 -->
		<el-input
			placeholder="请输入内容"
			v-model="searchWord"
			@keyup.native.enter="handleSearch"
		>
			<el-button slot="append" icon="el-icon-search" @click="handleSearch"
				>搜索</el-button
			>
		</el-input>
	</div>
</template>
<script>
export default {
	name: "SearchPart",
	data() {
		return {
			searchWord: "",
		};
	},
	methods: {
		handleSearch() {
			// console.log("跳转搜索页面");
			if (this.searchWord) {
				this.$router.push("/search?keyWord=" + this.searchWord);
			} else {
				this.$message({
					type: "error",
					message: "请输入关键字搜索",
				});
			}
		},
	},
};
</script>
<style scoped lang="scss">
@import "@/assets/scss/color";
.search-wrap {
	width: 600px;
	::v-deep .el-input__inner:focus {
		border-color: $mainColor;
	}
}
</style>
